<template>
  <div class="disc-list">
    <div class="list" v-for="item in discList" :key="item.dissid">
      <div class="icon">
        <img v-lazy="item.imgurl"/>
      </div>
      <div class="text">
        <div class="name">{{item.creator.name}}</div>
        <div class="desc">{{item.dissname}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    discList: {
      type: Array
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "~common/styles/variable.styl"
  .disc-list{
    padding 0px 10px;
    .list{
      display flex;
      box-sizing: border-box
      align-items: center
      padding: 10px 0 10px 0
      border-bottom 1px dashed #333;
      &:last-child{
        border 0px;
      }
      .icon{
        width 60px;
        padding-right: 10px
        img{
          width 60px;
        }
      }
      .text{
        display: flex
        flex-direction: column
        justify-content: center
        flex: 1
        line-height: 20px
        overflow: hidden
        font-size: $font-size-medium
        .name {
          margin-bottom: 10px
          color: $color-text
        }
        .desc {
          color: $color-text-d
        }
      }
    }
  }
</style>
